<template>
    <div class="my-desgin">
        <div class="tabs">
            <div :class="['tab-item', currentTabActive === 'drafts' ? 'active' : '']" @click="handleChangeTab('drafts')">草稿箱</div>
            <div :class="['tab-item', currentTabActive === 'printed' ? 'active' : '']" @click="handleChangeTab('printed')">已打印</div>
        </div>
        <div class="tabs-content">
            <div class="img-box">
                <div class="imgs" v-for="item in imgList" :key="item.id" @click="handleTo(item)">
                    <img :src="item.imgUrl" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {cardRequest} from "@/api";

export default {
    name: "index",
    data() {
        return {
            currentTabActive: 'drafts',
            dataMap: {
                drafts: [],
                printed: []
            },
        }
    },
    computed: {
        imgList() {
            return this.dataMap[this.currentTabActive] || []
        }
    },
    onLoad() {
        cardRequest.desginList().then(res => {
            this.dataMap = res.data
        })
    },
    methods: {
        handleChangeTab(item) {
            this.currentTabActive = item
        },
        handleTo(item) {
            uni.navigateTo({
                url: '/pages/myDetail/index?id=' + item.cardId
            })
        }
    }
}
</script>

<style lang="less">
.my-desgin {
    height: 100vh;
    overflow: hidden;
    background-color: #FBFBFB;
    display: flex;
    flex-direction: column;
    .tabs {
        display: flex;
        .tab-item {
            width: 50%;
            height: 56px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #1F222D;
            line-height: 56px;
            text-align: center;
            &.active {
                background-color: #4cd964;
                color: #FFFFFF;
            }
        }
    }
    .tabs-content {
        flex-grow: 1;
        overflow: auto;
        .img-box {
            padding: 16px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .imgs {
                width: calc((100% - 7px) / 2);
                height: 240px;
                border-radius: 4px;
                overflow: hidden;
                margin-bottom: 7px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>